import React from 'react';
import { WeaInputLocale } from 'ecCom';
import { inject, observer } from 'mobx-react';
import { Menu, Anchor, BackTop, Spin } from 'antd';

const SubMenu = Menu.SubMenu;
const getCurrentLabel = WeaInputLocale.getCurrentLabel;

export default class ApiMennu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: this.props.current,
      groups: this.props.groups,
    };
  }
  componentWillMount() {
    // 定时器，可以修改1000为自己想要的时间，
    this.interval = setInterval(
      () => { this.setState({ groups: this.props.groups }); }, 1000);
    // console.log(this.props.current)
  }
  render() {
    return (<Menu
      ecId={`${this && this.props && this.props.ecId || ''}_Menu@otjzwi`}
      selectedKeys={[this.state.current]}
      mode="horizontal"
    >
      {this.getApiMenuGroup()}
    </Menu>);
  }

    getApiMenuGroup = () => {
      const { InitGroupInfo, requestParam, scrollToAnchor, disabled } = this.props;
      const { groups } = this.state;
      const menuGroup = [];
      groups.map((group, index) => {
        if (group.item.length > 0) {
          menuGroup.push(
            <SubMenu
              ecId={`${this && this.props && this.props.ecId || ''}_SubMenu@c1cb3k@${index}`}
              title={<span className="submenu-title-wrapper">{getCurrentLabel(group.groupName)}</span>}
              onTitleClick={() => {
                InitGroupInfo(group.groupId);
                this.setState({ current: group.item[0].itemId });
              }}
              disabled={disabled}
            >
              {group.item.length > 0 && this.getApiMenuItem(group.item)}
            </SubMenu>,
          );
        }
      });
      return menuGroup;
    }
    // 菜单项
    getApiMenuItem = (items) => {
      const { groups, InitGroupInfo, requestParam, scrollToAnchor } = this.props;
      const menuItem = [];
      items.map((item) => {
        menuItem.push(
          <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_undefined@t6nm3y@${item.itemId}`} key={item.itemId} >
            <a
              href="javascript:;"
              onClick={() => {
                scrollToAnchor(item.itemId);
                this.setState({ current: item.itemId });
              }}
            >
              {getCurrentLabel(item.itemName)}
              {typeof (item.number) !== 'undefined' && <div className="badge margin-l-0-3x">{item.number}</div>}
            </a>
          </Menu.Item>,
        );
      });
      return menuItem;
    }
    componentWillUnmount() {
      // 清除定时器
      clearInterval(this.interval);
    }
}
